<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="../lib/vue.min.js"></script>
</head>
<body>
    <div id="box">
      <!-- <button @click="isShow=!isShow">click</button> -->
      <navbar>
        <button @click="isShow=!isShow">navbar-button</button>
      </navbar>
      <sidebar v-show="isShow"></sidebar>

    </div>
   
    <script type="text/javascript">
        //子组件

        Vue.component("navbar",{
          template:`<div>
            navbar
            
            <slot></slot>
          </div>`,
        })


        Vue.component("sidebar",{
          template:`<div style="background:yellow;width:200px;">
            <ul>
              <li>11111</li>  
              <li>11111</li>  
              <li>11111</li>  
            </ul>  
          </div>`
        })

        new Vue({
          el:"#box",
          data:{
            isShow:false
          }
        })
    </script>
</body>
</html>